<template>
    <div>
        <div style="margin-bottom: 5px;">
            <el-input v-model="userName" placeholder="请输入名字" suffix-icon="el-icon-search" style="width: 200px;"
                      @keyup.enter.native="loadPost"></el-input>
            <el-select v-model="gender" filterable placeholder="请选择性别" style="margin-left: 5px;">
                <el-option
                        v-for="item in genders"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-button type="primary" style="margin-left: 5px;" @click="loadPost">查询</el-button>
            <el-button type="success" @click="resetParam">重置</el-button>

            <el-button type="primary" style="margin-left: 5px;" @click="add">新增</el-button>
        </div>
        <el-table :data="tableData"
                  :header-cell-style="{ background: '#f2f5fc', color: '#555555' }"
                  border
        >
            <el-table-column prop="id" label="ID" width="60">
            </el-table-column>
            <el-table-column prop="account" label="账号" width="100">
            </el-table-column>
            <el-table-column prop="userName" label="用户名" width="100">
            </el-table-column>
            <el-table-column prop="gender" label="性别" width="60">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.gender === 1 ? 'primary' : 'success'"
                            disable-transitions>{{scope.row.gender === 1 ? '男' : '女'}}</el-tag>
                </template>
            </el-table-column>
              <el-table-column prop="phone" label="电话" width="150">
              </el-table-column>
              <el-table-column prop="email" label="邮箱" width="150">
              </el-table-column>
              <el-table-column prop="registerTime" label="注册时间" width="150">
              </el-table-column>
              <el-table-column prop="lastTime" label="最后登录时间" width="150">
              </el-table-column>
              <el-table-column prop="points" label="积分" width="60">
              </el-table-column>
            <el-table-column prop="roleId" label="用户权限" width="80">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.roleId === 0 ? 'danger' : (scope.row.roleId === 1 ? 'primary' : 'success')"
                            disable-transitions>{{scope.row.roleId === 0 ? '超级管理员' :
                        (scope.row.roleId === 1 ? '管理员' : '用户')}}</el-tag>
                </template>
            </el-table-column>
          <el-table-column prop="isValid" label="登录权限" width="80">
            <template slot-scope="scope">
              <el-tag
                  :type="scope.row.permission === 1 ? 'success' : 'danger'"
                  disable-transitions>{{scope.row.permission === 1 ? '允许' : '禁止'}}</el-tag>
            </template>
          </el-table-column>
            <el-table-column prop="operate" label="操作">
                <template slot-scope="scope">
                    <el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
                    <el-popconfirm
                            title="确定删除吗？"
                            @confirm="del(scope.row.id)"
                            style="margin-left: 5px;"
                    >
                        <el-button slot="reference" size="small" type="danger" >删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 20,30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <el-dialog
                title="用户"
                :visible.sync="centerDialogVisible"
                width="30%"
                center>

            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="账号" prop="account">
                    <el-col :span="20">
                        <el-input v-model="form.account"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="用户名" prop="userName">
                    <el-col :span="20">
                        <el-input v-model="form.userName"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="form.gender">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-col :span="20">
                        <el-input v-model="form.phone"></el-input>
                    </el-col>
                </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-col :span="20">
                  <el-input v-model="form.email"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="积分" prop="points">
                <el-col :span="20">
                  <el-input v-model="form.points"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="用户权限">
                <el-radio-group v-model="form.roleId">
                  <el-radio label="1">管理员</el-radio>
                  <el-radio label="2">用户</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="登录权限">
                <el-radio-group v-model="form.permission">
                  <el-radio label="1">允许</el-radio>
                  <el-radio label="0">禁止</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "UserManage",
        data() {
            let checkDuplicate =(rule,value,callback)=>{
                if(this.form.id){
                    return callback();
                }
                this.$axios.get(this.$httpUrl+"/sns-user/findByAccount?account="+this.form.account).then(res=>res.data).then(res=>{
                    if(res.code!=200){

                        callback()
                    }else{
                        callback(new Error('账号已经存在'));
                    }
                })
            };

            return {
                times:'',
                tableData: [],
                pageSize:10,
                pageNum:1,
                total:0,
                userName:'',
                gender:'',
                genders:[
                    {
                        value: '1',
                        label: '男'
                    }, {
                        value: '0',
                        label: '女'
                    }
                ],
                centerDialogVisible:false,
                form:{
                    id:'',
                    account:'',
                    userName:'',
                    gender:'1',
                    phone:'',
                    email:'',
                    points:'',
                    roleId:'2',
                    permission:'1',
                    registerTime:this.times
                },
                rules: {
                    account: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        {min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur'},
                        {validator:checkDuplicate,trigger: 'blur'}
                    ],
                    userName: [
                        {required: true, message: '请输入名字', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true,message: "手机号不能为空",trigger: "blur"},
                        {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur"}
                    ]
                }
            }
        },
        created() {
          this.getTimes()
        },
        beforeDestroy() {
          if (this.form.registerTime) {
            clearInterval(this.getTimesInterval);
          }
        },
        methods:{
            resetForm() {
                this.$refs.form.resetFields();
            },
            del(id){
                console.log(id)

                this.$axios.get(this.$httpUrl+'/sns-user/del?id='+id).then(res=>res.data).then(res=>{
                    console.log(res)
                    if(res.code==200){

                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.loadPost()
                    }else{
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }

                })
            },
            mod(row){
                console.log(row)

                this.centerDialogVisible = true
                this.$nextTick(()=>{
                    //赋值到表单
                    this.form.id = row.id
                    this.form.account = row.account
                    this.form.userName = row.userName
                    this.form.gender = row.gender+''
                    this.form.phone = row.phone
                    this.form.email = row.email
                    this.form.points = row.points
                    this.form.roleId = row.roleId+''
                    this.form.permission = row.permission+''
                    this.form.registerTime = row.registerTime
                })
            },
            add(){

                this.centerDialogVisible = true
                this.$nextTick(()=>{
                    this.resetForm()
                })

            },
            doSave(){
                this.$axios.post(this.$httpUrl+'/sns-user/save',this.form).then(res=>res.data).then(res=>{
                    console.log(res)
                    if(res.code==200){

                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.centerDialogVisible = false
                        this.loadPost()
                        this. resetForm()
                    }else{
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }

                })
            },
            doMod(){
                this.$axios.post(this.$httpUrl+'/sns-user/update',this.form).then(res=>res.data).then(res=>{
                    console.log(res)
                    if(res.code==200){

                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.centerDialogVisible = false
                        this.loadPost()
                        this. resetForm()
                    }else{
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }

                })
            },
            save(){
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        if(this.form.id){
                            this.doMod();
                        }else{
                            this.doSave();
                        }
                    } else {
                        console.log('服务器错误');
                        return false;
                    }
                });

            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageNum=1
                this.pageSize=val
                this.loadPost()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum=val
                this.loadPost()
            },
            loadGet(){
                this.$axios.get(this.$httpUrl+'/sns-user/list').then(res=>res.data).then(res=>{
                    console.log(res)
                })
            },
            resetParam(){
                this.userName=''
                this.gender=''
            },
            loadPost(){
                this.$axios.post(this.$httpUrl+'/sns-user/listPage',{
                    pageSize:this.pageSize,
                    pageNum:this.pageNum,
                    param:{
                        userName:this.userName,
                        gender:this.gender,
                        roleId:'2'
                    }
                }).then(res=>res.data).then(res=>{
                    console.log(res)
                    if(res.code==200){
                        this.tableData=res.data
                        this.total=res.total
                    }else{
                        alert('获取数据失败')
                    }

                })
            },
            getTimes(){
              setInterval(this.getTimesInterval, 1000);
            },
            getTimesInterval:function() {
              const newtime = new Date();
              let year = this.getIncrease(newtime.getFullYear(),4); //获取当前时间的年份
              let month = this.getIncrease(newtime.getMonth() + 1,2); //获取当前时间的月份
              let day = this.getIncrease(newtime.getDate(),2); //获取当前时间的天数
              let hours = this.getIncrease(newtime.getHours(),2); //获取当前时间的小时
              let minutes = this.getIncrease(newtime.getMinutes(),2); //获取当前时间的分数
              let seconds = this.getIncrease(newtime.getSeconds(),2); //获取当前时间的秒数
              //拼接格式化当前时间
              this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
            },
            getIncrease(num, digit) {
              var increase = "";
              for (var i = 0; i < digit; i++) {
                increase += "0";
              }
              return (increase + num).slice(-digit);
            }
        },
        beforeMount() {
            //this.loadGet();
            this.loadPost()
        }
    }
</script>

<style scoped>

</style>